<template>
  <v-container class="player-container" fluid grid-list-md>
    <v-layout row wrap>
      <v-flex d-flex md12>
        <v-layout row wrap>
          <!-- v-flex自动设置子元素获得flex: 1 1 auto; 即 flex-grow: 1; flex-shrink: 1; flex-basis: auto; -->
          <v-flex md2 sm1>
            <v-text-field mask="######" :counter="6" name="lftid" label="玩家ID" v-model="queryForm.lftid"></v-text-field>
          </v-flex>
          <v-flex md2 sm1>
            <v-text-field name="nickname" label="玩家昵称" v-model="queryForm.nickname"></v-text-field>
          </v-flex>
          <v-flex md1 sm1>
            <v-btn @click="search" dark color="blue" class="mt-2">
              <v-icon>search</v-icon>
              <span class="pl-2 subheading">搜索</span>
            </v-btn>
          </v-flex>
          <v-flex md12 class="chip-selector">
            <v-chip @click="chipClicked(item)" v-for="item of chipItems" :key="item.name" outline :color="chipSelected === item.value ? 'teal':'grey'"
              text-color="black">
              <v-avatar class="white--text subheading" :class="chipSelected === item.value ? 'teal':'grey'">
                <v-icon v-if="chipSelected === item.value">check</v-icon>
              </v-avatar>
              <span class="subheading">{{item.name}}</span>
            </v-chip>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex md12>
        <!-- 查询数据表格 -->
        <v-data-table :loading="showProgress" disable-initial-sort :headers="headers" :items="tableData" hide-actions class="elevation-1">
          <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
            <td class="text-xs-center">
              <v-avatar size="36">
                <img :src="props.item.headUrl" alt="">
              </v-avatar>
            </td>
            <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
            <td class="text-xs-center subheading">{{ props.item.proxyLevel | ProxyLevel }}</td>
            <td class="text-xs-center subheading">{{ getTime(props.item.createTime) }}</td>
            <td class="text-xs-center subheading">{{ props.item.totalTopup }}</td>
            <td class="text-xs-center subheading">
                {{ props.item.amount }}
            </td>
            <td class="text-xs-center">
              <v-btn flat round dark color="green" class="mx-1" @click="playerTopup(props.item)">
                <span class="mx-1">充值记录</span>
                <v-icon color="green">monetization_on</v-icon>
              </v-btn>
              <v-btn flat round dark color="red" class="mx-1" @click="playerDetails(props.item)">
                <span class="mx-1">玩家详情</span>
                <v-icon color="red">more</v-icon>
              </v-btn>
            </td>
          </template>
          <!-- 没有数据时显示的提示 -->
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>
        </v-data-table>
        <!-- 表格显示分页 -->
        <div class="text-xs-center my-2">
          <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
        </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as player from "../../api/player";
import { getTime } from "../../util";

import { mapMutations, mapActions } from "vuex";
export default {
  data: () => ({
    dialog: false,
    showProgress: true,
    limit: 10,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    dialogTitle: "充值记录",
    queryTypes: [
      {
        value: 1,
        title: "玩家ID"
      },
      {
        value: 2,
        title: "昵称"
      }
    ],
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    queryForm: {
      lftid: "",
      nickname: ""
    },
    startDate: "",
    endDate: "",
    chosenDate: "选择日期",
    toggleDialog: true,
    tabs: null,
    tableData: [],
    topupData: [],
    headers: [
      { text: "玩家ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "等级", value: "proxyLevel", align: "center", sortable: false },
      {
        text: "注册时间",
        value: "createTime",
        align: "center",
        sortable: false
      },
      {
        text: "累计充值",
        value: "totalTopup",
        align: "center",
        sortable: true
      },
      { text: "当前钻石", value: "gems", align: "center", sortable: true },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    playerObj: {
      headUrl: 0,
      lftid: 169502,
      nickname: "Lambogini",
      telephone: 1692021544,
      gender: 0,
      gems: 50,
      region: 430104,
      superId: 0,
      saleLevel: 1,
      createTime: "2018-4-19",
      saleLevelText: "高级业务员"
    },
    max25chars: v => v.length <= 7 || "输入数字太大!",
    chipItems: [
      {
        name: "今日",
        value: 1
      },
      {
        name: "昨日",
        value: 2
      },
      {
        name: "本月",
        value: 3
      },
      {
        name: "上月",
        value: 4
      },
      {
        name: "季度",
        value: 5
      },
      {
        name: "总计",
        value: 0
      }
    ],
    chipSelected: 1,
    diamonds: 0
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.getPlayerList();
  },
  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "New Item" : "Edit Item";
    }
  },
  methods: {
    ...mapMutations(["PROGRESS"]),
    ...mapActions(["PLAYER_ITEM"]),
    getTime,
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.queryForm = {
        lftid: "",
        nickname: ""
      };
      this.chipSelected = 1;
      this.pagination.page = 1;
      this.getPlayerList();
    },
    getPlayerList() {
      let opt = {
        limit: this.limit,
        offset: this.offset,
        type: this.chipSelected
      };
      this.showProgress = true;
      player.getPlayerList.r(opt).then(({ data }) => {
        if (data.result == 0) {
          this.tableData = data.data.dataList;
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    searchPlayerList() {
      let opt = {
        limit: this.limit,
        offset: this.offset,
        type: this.chipSelected
      };
      this.showProgress = true;
      this.queryForm.lftid ? (opt.lftid = this.queryForm.lftid) : void 0;
      this.queryForm.nickname
        ? (opt.nickname = this.queryForm.nickname)
        : void 0;
      player.searchPlayerList
        .r(opt)
        .then(({ data }) => {
          if (data.result == 0) {
            this.tableData = data.data.dataList;
          } else {
            $Vue.$emit("toggleSnackbar", {
              text: data.message
            });
          }
          this.showProgress = false;
        })
        .catch(err => {
          alert("请求错误");
        });
    },
    initialize() {
      this.tableData = [
        {
          lftid: 152600,
          nickname: "沧海",
          telephone: 4.0,
          superId: 0,
          proxyLevel: 1,
          gems: 888,
          totalTopup: 140,
          topupTime: "2018-4-19"
        }
      ];
    },
    // 玩家充值记录查询
    playerTopup(item) {
      this.PLAYER_ITEM(item);
      this.$router.push(`/player/playertopup/:${item.uid}`);
    },
    // 玩家详情查询
    playerDetails(item) {
      this.PLAYER_ITEM(item);
      this.$router.push(`/player/playerdetails/:${item.uid}`);
    },
    save() {
      if (this.editedIndex > -1) {
        Object.assign(this.tableData[this.editedIndex], this.editedItem);
      } else {
        this.tableData.push(this.editedItem);
      }
    },
    search(fromPage) {
      if (!this.queryForm.lftid && !this.queryForm.nickname) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请输入搜索条件"
        });
      }
      if (fromPage !== "wyvj") {
        this.offset = 0;
        this.pagination.page = 1;
      }
      // this.PROGRESS(true);
      this.searchPlayerList();
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getPlayerList();
      } else {
        // ***
        this.search("wyvj");
      }
    },
    editDiamond(item) {
      this.dialog = true;
      this.diamond = item
    },
    confirmModal() {
      this.editDiamond();
    },
    chipClicked(item) {
      this.chipSelected = item.value;
      this.getPlayerList();
    }
  }
};
</script>

<style lang="less" scoped>
</style>

